<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>照片墙</title>
		<style>
			/* 所有标签：去掉内边距和外边距 */
			* {
				padding: 0px;
				margin: 0px;
			}

			.div-main {
				height: 100vh;
				background-image: url("img/bg.jpg");
				background-size: cover;
			}

			.div-img {
				/* 绝对定位 */
				position: absolute;
				width: 350px;
				text-align: center;
				background-color: #ffffff;
				padding: 5px;
				/* 渐变动画：所有样式2秒完成变换 */
				transition: all 2s;
				/* 阴影 在x轴10像素，y轴10像素，展示3像素宽的阴影 */
				box-shadow: 10px 10px 3px;
			}

			.div-img>img {
				/* 设置宽度，根据父元素计算长度 */
				width: 100%;
				/* 根据宽度计算高度（不改变图片长宽比） */
				height: auto;
			}

			.div-img>h6 {
				font-size: 19px;
			}

			.div-img:nth-child(1) {
				left: 50px;
				top: 50px;
				z-index: 10;
			}

			.div-img:nth-child(2) {
				left: 375px;
				top: 75px;
				z-index: 20;
				transform: rotate(20deg);
			}

			.div-img:nth-child(3) {
				left: 600px;
				top: 100px;
				z-index: 30;
				transform: rotate(40deg);
			}

			.div-img:nth-child(4) {
				left: 925px;
				top: 125px;
				z-index: 25;
				transform: rotate(50deg);
			}

			.div-img:nth-child(5) {
				left: 1250px;
				top: 150px;
				z-index: 50;
				transform: rotate(80deg);
			}

			.div-img:nth-child(6) {
				left: 1550px;
				top: 175px;
				z-index: 60;
				transform: rotate(40deg);
			}

			.div-img:hover {
				z-index: 99;
				transform: rotate(0deg) scale(1.5);
			}
		</style>
	</head>
	<body>
		<div class="div-main">
			<!-- 一张照片 -->
			<div class="div-img">
				<img src="img/AsunaYuuki.jpg">
				<h6>《刀剑圣域》</h6>
				<p>亚丝娜</p>
			</div>
			<div class="div-img">
				<img src="img/Akari.jpg" />
				<h6>《桃花染的公主》</h6>
				<p>宫国朱璃</p>
			</div>
			<div class="div-img">
				<img src="img/DaiwaAisaka.jpg" />
				<h6>《龙与虎》</h6>
				<p>逢坂大河</p>
			</div>
			<div class="div-img">
				<img src="img/MamiTomoe.jpg" />
				<h6>《魔法少女园香》</h6>
				<p>巴麻美</p>
			</div>
			<div class="div-img">
				<img src="img/Neputune.jpg" />
				<h6>《超次元游戏-海王星》</h6>
				<p>海王星</p>
			</div>
			<div class="div-img">
				<img src="img/RikkaTakanashi.jpg" />
				<h6>《中二病也要恋爱》</h6>
				<p>小鸟游六花</p>
			</div>
		</div>
	</body>
</html>
